<!DOCTYPE>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <base th:href="@{/}">
    <meta charset="UTF-8">
    <title>退换货订单列表</title>
    <!-- 加载Vue框架的库文件 -->
    <script src="js/vue.js"></script>
    <!-- 加载Axios框架的库文件 -->
    <script src="js/axios.js"></script>
    <!-- 加载jQuery的库文件 -->
    <script src="js/jquery-3.6.0.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 导入外部css文件 -->
    <link rel="stylesheet" href="css/exchangeY.css">
</head>

<body>
    <!-- 最上方logo -->
    <div id="app">
        <div id="top">
            <div id="logo">
                <p>
                    <span>禧创</span>
                </p>
                <i class="el-icon-s-operation"></i>
            </div>
            <div id="sub">
                <p>
                    <span>OCP全渠道数字平台</span>
                </p>
            </div>
            <div id="detail">
                <el-row>
                    <el-button class="el-icon-chat-dot-round" type="danger" style="color: white;" circle></el-button>
                    <el-button class="el-icon-s-custom" type="danger" style="color: white;" circle></el-button>
                </el-row>
            </div>
            <div id="exit">
                <el-button class="el-icon-switch-button" type="danger" style="color: white;" circle></el-button>
            </div>
        </div>
        <!-- 上方导航栏 -->
            <!-- 相应页面链接 -->
            <div id="nav">
                <el-menu :default-active="Index" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                    background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                    <el-menu-item index="3"><a href="./homepageY.html">首页</a></el-menu-item>
                    <el-menu-item index="4"><a href="unChecked.html">待审核退换货订单列表</a></el-menu-item>
                    <el-menu-item index="5"><a href="exchangeY.html">退换货订单列表</a></el-menu-item>
                </el-menu>
            </div>
        <!-- 侧边导航栏 -->
        <div id="left">
            <template>
                <div class="demo-type">
                    <!--管理员头像-->
                    <div class="img">
                        <el-avatar :size="60" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
                        </el-avatar>
                    </div>
                    <div class="msg">
                        <!-- 管理员姓名 -->
                        <span>Name</span>
                        <br>
                        <span>管理员</span>
                    </div>
                </div>
            </template>
            <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                background-color="#989494" text-color="white">
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-s-home" style="color: white"></i>
                        <span>首页</span>
                    </template>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-document-copy" style="color: white"></i>
                        <span>备货订单管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="2-1">备货计划列表</el-menu-item>
                        <el-menu-item index="2-2">待审核备货订单</el-menu-item>
                        <el-menu-item index="2-3">待复核备货订单</el-menu-item>
                        <el-menu-item index="2-4">汇总计划列表</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title">
                        <i class="el-icon-data-line" style="color: white"></i>
                        <span>销售订单管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="3-1">零售订单列表</el-menu-item>
                        <el-menu-item index="3-2">批发订单列表</el-menu-item>
                        <el-menu-item index="3-3">待审核批发订单</el-menu-item>
                        <el-menu-item index="3-4">待复核批发订单</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="4">
                    <template slot="title">
                        <i class="el-icon-bell" style="color: white"></i>
                        <span>售后管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="4-1"><a href="unChecked.html">待审核退换货订单列表</a></el-menu-item>
                        <el-menu-item index="4-2"><a href="exchangeY.html">退换货订单列表</a></el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="5">
                    <template slot="title">
                        <i class="el-icon-user" style="color: white"></i>
                        <span>经销商管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="5-1">经销商列表</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="6">
                    <template slot="title">
                        <i class="el-icon-shopping-cart-full" style="color: white"></i>
                        <span>库存管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="6-1">仓库维护</el-menu-item>
                        <el-menu-item index="6-2">菜鸟仓库存列表</el-menu-item>
                        <el-menu-item index="6-3">工厂库存列表</el-menu-item>
                        <el-menu-item index="6-4">调拨单列表</el-menu-item>
                        <el-menu-item index="6-5">创建调拨单</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="7">
                    <template slot="title">
                        <i class="el-icon-goods" style="color: white"></i>
                        <span>产品管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="7-1">产品列表</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="8">
                    <template slot="title">
                        <i class="el-icon-suitcase-1" style="color: white"></i>
                        <span>内容维护</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="8-1">首页公告列表</el-menu-item>
                        <el-menu-item index="8-2">首页咨讯列表</el-menu-item>
                        <el-menu-item index="8-3">首页信息平台列表</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="9">
                    <template slot="title">
                        <i class="el-icon-setting" style="color: white"></i>
                        <span>系统配置</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="9-1"><a href="operationManagement.html">运营账号管理</a></el-menu-item>
                        <el-menu-item index="9-2"><a href="distributorManagement.html">经销商账号管理</a></el-menu-item>
                        <el-menu-item index="9-3">菜单管理</el-menu-item>
                        <el-menu-item index="9-4"><a href="roleManagement.html">运营角色管理</a></el-menu-item>
                        <el-menu-item index="9-5">日志</el-menu-item>
                        <el-menu-item index="9-6">数据字典</el-menu-item>
                        <el-menu-item index="9-7">机构管理</el-menu-item>
                        <el-menu-item index="9-8">产品类别</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </div>
        <!-- 会员名称等信息动态查询 -->
        <div id="sel">
            <!-- <el-form :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm" size="mini" label-width="100px"
                class="demo-ruleForm">
                <el-form-item label="会员名称：" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="订单编号:" style="width: 280px;" prop="region">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="活动时间" required>
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1"
                                style="width: 100%;">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-form-item prop="date2">
                            <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;">
                            </el-time-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="经销商账号:" style="width: 280px;" prop="region">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="原销售单来源单号:" style="width: 280px;" prop="region">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="经销商账号:" style="width: 280px;" prop="region">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form> -->
            会员名称：
            <el-input v-model="ruleForm.name" placeholder="请输入内容" size="small" style="width: 160px;"></el-input>
            退换货订单编号：
            <el-input v-model="ruleForm.number" placeholder="请输入内容" size="small" style="width: 145px;"></el-input>
            <el-form :model="ruleForm" size="small" label-width="140px" class="demo-ruleForm">
                <el-form-item label="提交退换货日期：">
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1"
                                style="width: 130px;">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <span id="span1">
                        <el-col class="line" :span="2">至</el-col>
                        <el-col :span="11">
                            <el-form-item prop="date2">
                                <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date2"
                                    style="width: 130px;">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </span>
                </el-form-item>
            </el-form>
            <div id="line2">
                经销商账号：
                <el-input v-model="ruleForm.account" placeholder="请输入内容" size="small" style="width: 145px;"></el-input>
                原销售单来源单号：
                <el-input v-model="ruleForm.rsale" placeholder="请输入内容" size="small" style="width: 130px;"></el-input>
                仓库名称：
                <el-input v-model="ruleForm.warehouse" placeholder="请输入内容" size="small" style="width: 180px;">
                </el-input>
            </div>
            <div id="line3">
                快递公司：
                <el-input v-model="ruleForm.company" placeholder="请输入内容" size="small" style="width: 160px;"></el-input>
                快递单号：
                <el-input v-model="ruleForm.expressno" placeholder="请输入内容" size="small" style="width: 195px;">
                </el-input>
                退货原因：
                <el-input v-model="ruleForm.reason" placeholder="请输入内容" size="small" style="width: 180px;"></el-input>
            </div>
            <div id="line4">
                <!-- 订单状态：
                <el-input v-model="ruleForm.input" placeholder="请输入内容" size="small" style="width: 160px;"></el-input> -->
                <el-form :inline="true" :model="ruleForm" class="demo-form-inline" size="small">
                    <el-form-item label="订单状态：">
                        <el-select v-model="ruleForm.input" placeholder="请输入内容">
                            <el-option label="待审核"></el-option>
                            <el-option label="待收货"></el-option>
                            <el-option label="待结算"></el-option>
                            <el-option label="已完成"></el-option>
                            <el-option label="已作废"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <!-- 查询、导出功能 -->
        <div id="function">
            <el-row>
                <el-button type="danger" class="el-icon-user-solid" @click="Select">查询</el-button>
                <el-button type="danger" class="el-icon-user-solid" @click="Out">导出</el-button>
            </el-row>
        </div>
        <!-- 表格 -->
        <div id="form">
            <template>
                <el-table :data="tableData" border height="340px" style="border:1px solid darkgrey" size="mini"
                    :fit="false" :header-cell-style="{background:'#979494',color:'#fff'}">
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column type="index" label="序号" align="center" width="50px"></el-table-column>
                    <el-table-column prop="type" label="订单类型" align="center" width="90px"></el-table-column>
                    <el-table-column prop="number" label="退换货订单编号" align="center" width="90px"></el-table-column>
                    <el-table-column prop="date" label="提交退换货日期" align="center" width="90px"></el-table-column>
                    <el-table-column prop="rnumber" label="原销售订单号" align="center" width="90px"></el-table-column>
                    <el-table-column prop="recovery" label="应恢复贷款金额" align="center" width="90px"></el-table-column>
                    <el-table-column prop="state" label="订单状态" align="center" width="90px"></el-table-column>
                    <el-table-column prop="mode" label="退货方式" align="center" width="90px"></el-table-column>
                    <el-table-column prop="name" label="会员名称" align="center" width="90px"></el-table-column>
                    <el-table-column prop="rname" label="原发货仓库名称" align="center" width="90px"></el-table-column>
                    <el-table-column prop="return" label="退回仓库" align="center" width="90px"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                            <el-button type="text" size="small">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage4" :page-sizes="[10, 20, 30, 40]" :page-size="40"
                        layout="sizes, prev, pager, next, jumper" :total="1000">
                    </el-pagination>
                </div>
            </template>

        </div>
    </div>
</body>
<script type="module">
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                ruleForm: {
                    name: '',
                    number: '',
                    date1: '',
                    date2: '',
                    account: '',
                    rsale: '',
                    warehouse: '',
                    company: '',
                    expressno: '',
                    reason: '',
                    input: '',
                },
                // rules: {
                //     name: [
                //         { required: true, message: '请输入活动名称', trigger: 'blur' },
                //         { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                //     ],
                //     region: [
                //         { required: true, message: '请选择活动区域', trigger: 'change' }
                //     ],
                //     date1: [
                //         { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                //     ],
                //     date2: [
                //         { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                //     ],
                // },
                activeIndex2: '5',
                tableData: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
                //分页功能
                currentPage4: 4,
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            // resetForm(formName) {
            //     this.$refs[formName].resetFields();
            // },
            // handleClick(row) {
            //     console.log(row);
            // },
            // 查询功能
            Select() {
                console.log('查询');
            },
            // 导出功能
            Out() {
                console.log('导出');
            },
            //分页功能
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        }
    });
</script>

</html>